<template>
  <div class="sell-records">
    <Tabs v-model:active="params.totalStatus"
      @click-tab="handleConfirm">
      <Tab :title="category.text"
        :name="category.value"
        v-for="category in totalSellStatus"
        :key="category.value" />
    </Tabs>
    <PullRefresh v-model="pageState.refreshing"
      @refresh="refresh" class="pull-refresh">
      <SkeletonCategory
        v-if="stateOrderList.loading" />
      <SkeletonCard
        v-if="stateOrderList.loading" />
      <Empty v-if="!stateOrderList.data.length && !stateOrderList.loading" />
      <List
        v-model:loading="stateOrderList.loading"
        :finished="pageState.finished"
        finished-text="没有更多了"
        error-text="请求失败，下拉刷新"
        :error="pageState.error"
        @load="fetchData">
        <SellRecordCard :record="record"
          v-for="record in stateOrderList.data"
          :key="record.customOrderNo" />
      </List>
    </PullRefresh>

  </div>
</template>
<script setup lang="ts">
import {
  Empty, List,
  PullRefresh,
  Tab, Tabs,
} from 'vant';

import SkeletonCard from '@/components/SkeletonCard.vue';
import SkeletonCategory from '@/components/SkeletonCategory.vue';

import SellRecordCard from '../components/SellRecordCard.vue';
import { totalSellStatus } from '../config';
import useCardOrder from '../hooks/useCardOrder';

const {
  state: stateOrderList,
  pageState,
  params,
  fetchData,
  refresh,
} = useCardOrder();

const handleConfirm = () => {
  pageState.value.refreshing = true;
  refresh();
};

</script>
<style lang="less" scoped>
.sell-records {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  .pull-refresh {
    flex-grow: 1;
  }
}
</style>
